import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Modal, Button, Table, Input, Radio } from 'antd';

import { getExistPaper } from '../../service/api';

class HistoryPaper extends PureComponent {
  state = {
    name: '',
    type: -1,
    canAjaxAuto: true,
    selectedRowKeys: [],
    dataSource: [
      {
        id: 1,
        key: 7,
      },
      {
        id: 2,
        key: 8,
      },
    ],
  };

  componentDidMount = () => {
    this.getData();
  };
  componentDidUpdate = () => {
    if (this.props.visible && this.state.canAjaxAuto) {
      console.log('此处会执行更新函数');
      this.setState({
        canAjaxAuto: false,
      });
    }
  };

  modalOk = e => {
    this.props.importOk();
  };

  modalCancel = e => {
    this.props.importCancel();
  };

  getColumns = () => {
    const columns = [
      {
        title: 'action',
        key: 'action',
        render: record => {
          return <div>233333333333</div>;
        },
      },
    ];
    return columns;
  };

  rowSelection = () => {
    return {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys });
      },
      type: 'radio',
      fixed: false,
    };
  };

  onRow = record => {
    return {
      onClick: () => {
        let { selectedRowKeys } = this.state;

        if (selectedRowKeys.length === 0) {
          selectedRowKeys.push(record.key);
        } else if (selectedRowKeys[0] === record.key) {
          selectedRowKeys = [];
        } else {
          selectedRowKeys = [record.key];
        }

        this.setState({
          selectedRowKeys: [...selectedRowKeys],
        });
      },
    };
  };

  getData = () => {
    const a = getExistPaper({
      name: this.state.name,
      type: '',
    }).then(data => {
      console.log(data);
    });
  };

  radioChange = e => {
    this.setState({
      type: e.target.value,
    });
  };

  render = () => {
    const { visible } = this.props;

    return (
      <div>
        <Modal visible={visible} onOk={this.modalOk} onCancel={this.modalCancel} width="50%">
          <Input placeholder="请输入试卷名称" style={{ width: '85%' }} />&nbsp;&nbsp;<Button type="primary">
            搜索
          </Button>
          <br />
          <br />
          <Radio.Group onChange={this.radioChange} value={this.state.type} size="small">
            <Radio.Button value="-1">全部</Radio.Button>
            <Radio.Button value="1">我的</Radio.Button>
            <Radio.Button value="2">其他人</Radio.Button>
          </Radio.Group>
          <Table
            dataSource={this.state.dataSource}
            columns={this.getColumns()}
            showHeader={false}
            bordered={false}
            pagination={{ hideOnSinglePage: true }}
            rowSelection={this.rowSelection()}
            onRow={this.onRow}
          />
        </Modal>
      </div>
    );
  };
}

export default HistoryPaper;
